<template>
	<div class="Model">
		<el-dialog
		  :title="title"
		  :visible.sync="typeshow"
		  width="70%"
		  :before-close="closeclick"
		  center>
		  <div class="selectUser">
		  	<div class="selectUserList"
		  			v-if="selectUserList.length > 0" >
		  		<div style="width: 100%;line-height: 40px;">已选择成员</div>
		  		<div class="user-cell" 
		  			v-for="(item, index) in selectUserList"
		  			@mouseenter="enter(index)"
		  			@mouseleave="leave()"
		  			@click="delselectClick(item)">
		  			<div class="userimg">
		  				<img  :src="item.headImg" /></div>
		  			<div class="username">{{item.name}}</div>
		  			<div class=" iconfont optionicon" :class="iconfontinfo"></div>
		  		</div>
		  	</div>
		  	<div class="top-sreach">
		  		<!--<div class="sreach-input-content">-->
					<!--<i class="iconfont sreach iconsousuo1"></i>-->
					<el-input class="sreach-input" :clearable="true" @clear="clearclick" v-model="username" placeholder="请输入名字进行搜索" >
						 <template slot="prepend"><i class="iconfont sreach iconsousuo1"></i></template>
					</el-input>
				<!--</div>-->
				<div class="addUser">
					<div class="userIcon" @click="searchClick">搜索</div>
				</div>
		  	</div>
		  	<div class="user"
		  		v-loading="loading"
				element-loading-text="拼命加载中"
			    element-loading-spinner="el-icon-loading"
			    element-loading-background="rgba(0, 0, 0, 0.2)">
		  		<div class="user-cell" 
		  			v-if="totall > 0" 
		  			v-for="(item, index) in userdata"
		  			@click="selectUserClick(item)">
		  			<div class="userimg">
		  				<img  :src="item.headImg" /></div>
		  			<div class="username">{{item.name}}</div>
		  			<div class=" iconfont optionicon iconziyuan"></div>
		  		</div>
		  		<div class="user-cell-no"  v-if="totall === 0">
		  			暂无数据
		  		</div>
		  	</div>
		  	<!--分页-->
			<div class="pages-other">
				<el-pagination
				  background
				  @current-change="handleCurrentChange"
				  layout="prev, pager, next"
				  :page-size="size"
				  :total="totall">
				</el-pagination>
			</div>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="sureClick">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
import Bus from '@/common/config/bus'
import {alluser} from '@/service/selectmodel'
export default {
	name:"SelectModel",
	props:{
		modeshow:{
			type:Boolean,
			default:false
		},
		title:{
			type:String,
			default:'选择人物'
		}
	},
	watch: {
	   modeshow(newV,oldV) {
	     if(newV){
	     	this.typeshow = newV
	     }
	   } 
	},
    data () {
        return {
        	loading:false,
        	userdata:[],
        	//默认头像
        	headericon:'../../../static/header/menu/position.png',
        	size:10,
        	page:1,
        	totall:0,
        	typeshow:this.modeshow,
        	//搜索字段
        	username:'',
        	//选择的人
        	selectUserList:[],
        	//样式标志
        	enterindex:-1,
        	iconfontinfo:'iconziyuan'//删除iconyingyong-
   		}
    },
    created(){
		let data = {
			index:this.page,
			size:this.size,
		}
		this.datareq = data
		this.loadalluser(data)
	
    },
    methods:{
    	enter(index){
    		this.enterindex = index
    		this.iconfontinfo = 'iconyingyong- colori'
    	},
    	leave(){
    		this.iconfontinfo = 'iconziyuan'
    	},
    	//删除选择
    	delselectClick(item){
    		for(let i = 0;i < this.selectUserList.length;i++){
    			if(item.userId === this.selectUserList[i].userId) this.selectUserList.splice(i, 1)
    		}
    	},
    	//选择用户
    	selectUserClick(item){
    		if(this.selectUserList.length > 0){
    			for(let i = 0;i < this.selectUserList.length;i++){
	    			if(this.selectUserList[i].userId === item.userId){
	    				return
	    			}else{
	    				this.selectUserList.push(item)
	    			}
	    			this.unique(this.selectUserList)
    			}
    		}else{
    			this.selectUserList.push(item)
    		}
    		
    	},
    	//数组去重
    	unique(arr){            
	        for(var i=0; i<arr.length; i++){
	            for(var j=i+1; j<arr.length; j++){
	                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
	                    arr.splice(j,1);
	                    j--;
	                }
	            }
	        }
			return arr;
		},
    	//去除搜索清空
    	clearclick(){
    		this.userdata = []
    		this.datareq.index = 1
    		this.loadalluser(this.datareq)
    	},
    	//分页
	  	handleCurrentChange(e){
	  		this.datareq.index = e
	  		this.userdata = []
	  		this.loadalluser(this.datareq)
	  	},
    	//搜索请求
    	searchClick(){
    		this.userdata = []
    		this.datareq.index = 1
    		this.datareq.name = this.username
    		this.loadalluser(this.datareq)
    	},
    	closeclick(e){
    		this.typeshow = false
    		let data = {
    			show:this.typeshow,
    			datainfo:this.selectUserList
    		}
    		Bus.$emit('close',data)
    	},
    	sureClick(){
    		this.typeshow = false
    		console.log(this.selectUserList)
    		let data = {
    			show:this.typeshow,
    			datainfo:this.selectUserList
    		}
    		Bus.$emit('closesure',data)
    		Bus.$emit('close',data)
    	},
    	//获取所有的用户数据
    	loadalluser(data){
    		const that = this
    		that.loading = true
    		console.log("解决")
    		alluser(data).then(res =>{
			that.loading = false
			console.log(res)
			if(res.data.code === 0){
				that.userdata = res.data.data.rows
				that.totall = res.data.data.total
				for(let i=0;i<that.userdata.length;i++){
					if(that.userdata[i].headImg === ''||that.userdata[i].headImg === null){
						that.userdata[i].headImg = that.headericon
					}
				}
				console.log(that.userdata)
				
			}else{
				that.loading = false
				that.$notify({
		          title: '警告',
		          message: '服务器出错了',
		          type: 'warning'
		        });
			}
		})
		.catch(res => {
        	that.$message.error(res);
      	});
    	}
    }
}
</script>

<style scoped lang="scss">
$from_active:#409EFF;
.Model{
	/*选择人物*/
	.selectUser{
		margin: 0 10%;
		width: 80%;
		padding-bottom: 20px;
		background-color: #F9F9F9;
		.selectUserList{
			margin: 0 5%;
			width: 90%;
			display: inline-flex;
			flex-flow: wrap;
			.user-cell{
				position: relative;
				padding: 10px 0;
				width: 10%;
				.userimg{
					margin: 0 10%;
					display: inline-flex;
					align-items: center;
					text-align: center;
					justify-content: center;
					width: 80%;
					overflow: hidden;
					border-radius: 100%;
					img{
						width: 100%;
					}
				}
				.username{
					font-family: "微软雅黑";
					text-align: center;
					font-size: 14px;
					color: $from_active;
					font-weight: bold;
				}
				.optionicon{
					position: absolute;
					top: 4px;
					right: 6px;
					color: #89C149;
					font-size: 22px;
				}
				.colori{
					color: #E51C23;
				}
			}
		}
		.top-sreach{
			display: inline-flex;
			margin: 0 20%;
			width: 60%;
			overflow: hidden;
			background-color: white;
			/*border-radius: 10px;*/
			border-top-right-radius: 10px;
			border-bottom-right-radius: 10px;
			margin-top: 40px;
			.sreach-input-content{
				width: 85%;
				border: 0;
				margin-left: 5px;
				background-color: white;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				height: 40px;
				.sreach{
					width: 10%;
					height: 100%;
					margin-left: 20px;
					line-height: 42px;
					font-size: 16px;
				}
				.sreach-input{
					margin-left: 5px;
					height: 38px;
					border: 0;
					width: 85%;
					border: 0;
					padding-left: 10px;
					input{
						border: 0;
					}
				}
				.sreach-input input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
					margin-left: 10px;
					padding-left: 10px;
				}
				.sreach-input input::-moz-placeholder { /* Firefox 19+ */  
					margin-left: 10px;
				}
				.sreach-input input:-ms-input-placeholder { /* IE 10+ */ 
					margin-left: 10px;
				}
				.sreach-input input:-moz-placeholder { /* Firefox 18- */ 
					margin-left: 10px;
				}
			}
			.addUser{
				width: 15%;
				background-color: $from_active;
				.userIcon{
					font-family: "微软雅黑";
					font-size: 18px;
					line-height: 40px;
					margin-left: 20px;
					color: white;
				}
			}
		}
	}
	/*用户数据*/
	.user{
		margin: 0 5%;
		margin-top: 40px;
		width: 90%;
		display: inline-flex;
		flex-flow: wrap;
		min-height: 150px;
		.user-cell-no{
			text-align: center;
			width: 100%;
		}
		.user-cell{
			position: relative;
			padding: 10px 0;
			width: 10%;
			.userimg{
				margin: 0 10%;
				display: inline-flex;
				align-items: center;
				text-align: center;
				justify-content: center;
				width: 80%;
				overflow: hidden;
				border-radius: 100%;
				img{
					width: 100%;
				}
			}
			.username{
				font-family: "微软雅黑";
				text-align: center;
				font-size: 14px;
				color: $from_active;
				font-weight: bold;
			}
			.optionicon{
				position: absolute;
				top: 4px;
				right: 6px;
				font-size: 22px;
			}
		}
	}
	/*分页*/
	.pages-other{
		margin: 0 20%;
		margin-top: 20px;
		width: 60%;
		text-align: center;
	}
}
</style>